<template>
	<div id="coupon">
		<van-nav-bar
		  title="优惠券"
		  left-arrow
		  @click-left="onClickLeft"
		  style="background: linear-gradient(to right,#ff6034,#ee0a24);"
		/>
		<van-coupon-list
		    :coupons="coupons"
		    :chosen-coupon="chosenCoupon"
		    :disabled-coupons="disabledCoupons"
		    @change="onChange"
		    @exchange="onExchange"
		  />
	</div>
</template>

<script>
	const coupon = {
	  available: 1,
	  condition: '满10元立减3元',
	  reason: '',
	  value: 300,
	  name: '新人专享',
	  startAt: 1624082595000,//毫秒
	  endAt: 1624687395000,
	  valueDesc: '3',
	  unitDesc: '元',
	};
	const coupon1 = {
	  available: 1,
	  condition: '无使用门槛\n最多优惠12元',
	  reason: '',
	  value: 500,
	  name: '新人专享',
	  startAt: 1623477795000,//毫秒
	  endAt: 1624082595000,
	  valueDesc: '5',
	  unitDesc: '元',
	};
	export default {
	  data() {
	    return {
	      chosenCoupon: -1,
	      coupons: [coupon,coupon1],
	      disabledCoupons: [coupon1],
	    };
	  },
	  methods: {
		onClickLeft(){
			this.$router.go(-1);
		},
	    onChange(index) {
	      this.showList = false;
	      this.chosenCoupon = index;
	    },
	    onExchange(code) {
	      this.coupons.push(coupon);
	    },
	  },
	}
</script>

<style scoped="scoped">
	#coupon{
		width: 100%;
		height: 100vh;
	}
	.van-coupon__head{
		color: #FF5809;
	}
</style>
